<!--
 * @Author: 李九阳
 * @Date: 2021-12-13 08:37:10
 * @LastEditors: 李九阳
 * @LastEditTime: 2021-12-14 15:03:31
-->
<template>
  <div id="arcGisViewDiv"></div>
  <!-- <calcite-card id="arcGisControls" class="calcite-theme-dark">
    <div>Controls</div>
    <calcite-label
      >Line width
      <calcite-slider
        id="lineWidth"
        min="0"
        max="10"
        value="2"
        label-handles
      ></calcite-slider>
    </calcite-label>
    <calcite-label
      >Line color
      <calcite-input
        id="lineColor"
        type="color"
        value="#3278f0"
      ></calcite-input>
    </calcite-label>
    <calcite-label
      >Density
      <calcite-slider
        id="density"
        min="0"
        max="1"
        value="1"
        label-handles
      ></calcite-slider>
    </calcite-label>
    <calcite-label
      >Line length
      <calcite-slider
        id="lineLength"
        min="0"
        max="500"
        value="200"
        label-handles
      ></calcite-slider>
    </calcite-label>
    <calcite-label
      >Line speed
      <calcite-slider
        id="lineSpeed"
        min="0"
        max="100"
        value="10"
        label-handles
      ></calcite-slider>
    </calcite-label>
    <calcite-label
      >Fade duration
      <calcite-slider
        id="fadeDuration"
        min="0"
        max="500"
        value="100"
        label-handles
      ></calcite-slider>
    </calcite-label>
    <calcite-label
      >Effects enabled
      <calcite-checkbox id="effectsEnabled" checked></calcite-checkbox>
    </calcite-label>
  </calcite-card> -->

  <calcite-panel id="configPanel" heading="Magnifier Configuration">
    <calcite-label id="toggleLabel"
      >Magnifier
      <calcite-switch scale="l" dir="rtl" id="toggleSwitch"></calcite-switch>
    </calcite-label>
    <calcite-label
      >factor
      <calcite-input id="factorInput" type="number" scale="s"> </calcite-input>
    </calcite-label>
    <calcite-label
      >xoffset
      <calcite-input id="xoffsetInput" type="number" scale="s"> </calcite-input>
    </calcite-label>
    <calcite-label
      >yoffset
      <calcite-input id="yoffsetInput" type="number" scale="s"> </calcite-input>
    </calcite-label>
    <calcite-label
      >size
      <calcite-input id="sizeInput" type="number" scale="s"> </calcite-input>
    </calcite-label>
  </calcite-panel>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, nextTick } from "vue";
import { initMap, widgets } from "./gisServiec";
import "@arcgis/core/assets/esri/themes/light/main.css";
export default defineComponent({
  name: "vueArcGis",
  setup() {
    onMounted(() => {
      initMap();
      widgets();
    });
    return {};
  },
});
</script>
<style lang="scss" scoped>
#arcGisViewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#arcGisControls {
  width: 300px;
  max-height: 90vh;
  overflow: auto;
}
#configPanel {
  padding: 1em;
  calcite-label {
    background-color: #ffffff;
  }
  #toggleLabel {
    padding-top: 10px;
  }
}
</style>
